import {
  Col,
  Row,
  Descriptions,
  Form,
  Input,
  Button,
  Radio,
  Upload,
  message,
  DatePicker,
  Spin,
} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { history } from 'umi';
import React, { useState } from 'react';
const { TextArea } = Input;
import moment from 'moment';
import request, { serverUrlRoot } from '@/http';
import SecurityService, { askForLeave } from '@/pages/login/service';
interface Student {
  stuName: any;
  userNo: any;
  idNo: any;
  sex: any;
  email: any;
  mobileNo: any;
  collegesName: any;
  majorName: any;
  gradeName: any;
  className: any;
  teaName: any;
  teacherMobileNo: any;
}

export default function dispose(Props: any) {
  const [formObject] = Form.useForm(); //获取数据

  const [fileId, setfileId] = useState<any>();
  const propsdata = {
    name: 'file',
    action: serverUrlRoot + '/file/uploadFile',
    headers: {
      Authorization: SecurityService.getSecurity(),
    },
    onChange: (e: any) => {
      if (e.file.status == 'done') {
        let fileList: any = [];
        e.fileList.map((item: any) => {
          fileList.push(item.response.data.id);
          // console.log(item.response.data.id);
        });
        console.log(fileList);
        setfileId(fileList);
      }
    },
    beforeUpload: (file: any) => {
      // console.log(file);
      const isJpgOrPng =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/bmp' ||
        file.type === 'image/gif' ||
        file.type === 'text/plain' ||
        file.type === 'application/x-zip-compressed';
      if (!isJpgOrPng) {
        message.error('你只能上传 JPG/PNG/GIF/BMP/TXT/ZIP 文件!');
      }
      const isLt10M = file.size / (1024 * 10) <= 10;
      if (!isLt10M) {
        message.error('单个文件不能超过 10MB!');
      }
      return isJpgOrPng && isLt10M ? true : Upload.LIST_IGNORE;
    },
    onRemove: (file: any) => {
      let list = fileId;
      list.splice(list.indexOf(file.response.data.id), 1);
      setfileId(list);
    },
  };

  const [value, setValue] = React.useState(0);
  const onChange = (e: any) => {
    setValue(e.target.value);
  };

  const [desData, setDesData] = useState<Student>({
    stuName: '',
    userNo: '',
    idNo: '',
    sex: '',
    email: '',
    mobileNo: '',
    collegesName: '',
    majorName: '',
    gradeName: '',
    className: '',
    teaName: '',
    teacherMobileNo: '',
  });

  const Des = async () => {
    const result: any = await request.get('/api/student/queryCurStuBaseInfo');
    if (result.success) {
      setspinning(false);
      setDesData(result.data);
    }
  };

  const GetLeave = async () => {
    await request
      .get(
        '/api/student/queryLeaveDetailByLeaId?leaveId=' +
          askForLeave.getAskForLeaveId().id,
      )
      .then((response: any) => {
        if (response.code == 200) {
          formObject.setFieldsValue({
            theme: response.data.theme,
            startLeaveTime: moment(response.data.startLeaveTime),
            endLeaveTime: moment(response.data.endLeaveTime),
            leaveType: response.data.leaveType,
            reason: response.data.reason,
          });
        } else {
          message.error('请假详情获取时发生/' + response.message + '/错误！！');
        }
      });
  };

  React.useEffect(() => {
    if (askForLeave.getAskForLeaveId().state == 1) {
      GetLeave();
    }
    Des().finally();
  }, []);

  const addData = async (values: any) => {
    //保存请假信息
    await request
      .get(
        '/api/student/askForLeave?' +
          'endLeaveTime=' +
          moment(values.endLeaveTime).format('YYYY-MM-DD HH:mm:ss') +
          '&id=' +
          (askForLeave.getAskForLeaveId().state == 1
            ? askForLeave.getAskForLeaveId().id
            : '') +
          '&leaveType=' +
          values.leaveType +
          '&reason=' +
          values.reason +
          '&startLeaveTime=' +
          moment(values.startLeaveTime).format('YYYY-MM-DD HH:mm:ss') +
          '&theme=' +
          values.theme,
      )
      .then((response: any) => {
        if (response.code == 200 && fileId) {
          fileId.map(async (item: number) => {
            await request
              .post(
                '/file/addInformation',
                {
                  fileName: '',
                  fileUrl: '',
                  originId: response.data,
                  id: item,
                  originType: '2',
                },
                { headers: { 'Content-Type': 'application/json' } },
              )
              .then((responses: any) => {
                if (responses.code == 200) {
                } else {
                  message.error(responses.message);
                }
              });
          });
          message.success(response.message);
          history.goBack();
        } else if (response.code == 200) {
          message.success(response.message);
          history.goBack();
        } else {
          message.error(response.message);
        }
      });
  };

  const [spinning, setspinning] = useState(true);
  return (
    <Spin spinning={spinning} size="large">
      <Row justify="center" style={{ marginTop: 30 }}>
        <Col span={22}>
          <Descriptions
            layout="vertical"
            labelStyle={{
              fontSize: '13px',
              fontWeight: 'bold',
            }}
            contentStyle={{
              fontSize: '16px',
            }}
            column={4}
          >
            <Descriptions.Item label="姓名">
              {desData.stuName}
            </Descriptions.Item>
            <Descriptions.Item label="学号">{desData.userNo}</Descriptions.Item>
            <Descriptions.Item label="院系">
              {desData.collegesName}
            </Descriptions.Item>
            <Descriptions.Item label="专业">
              {desData.majorName}
            </Descriptions.Item>
            <Descriptions.Item label="年级">
              {desData.gradeName}
            </Descriptions.Item>
            <Descriptions.Item label="班级">
              {desData.className}
            </Descriptions.Item>
            <Descriptions.Item label="班主任">
              {desData.teaName}
            </Descriptions.Item>
          </Descriptions>
        </Col>
        <Col span={22} style={{ marginTop: 40 }}>
          <Form
            name="editForm"
            form={formObject}
            preserve={false}
            layout="vertical"
            onFinish={async (values: any) => {
              await addData(values);
            }}
            initialValues={{ leaveType: value }}
          >
            <Row gutter={24} justify="center">
              <Col span={24} key="1">
                <Form.Item
                  label="主题"
                  name="theme"
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: '用户编号不能为空!',
                    },
                    { max: 30, message: '最大长度不能超过30!' },
                  ]}
                  style={{ marginBottom: 24 }}
                >
                  <Input placeholder="请输入" />
                </Form.Item>
              </Col>
              <Col span={24} key="2">
                <Row gutter={24}>
                  <Col span={8} key="3">
                    <Form.Item
                      label="选择开始日期"
                      name="startLeaveTime"
                      rules={[{ required: true, message: '不能为空！' }]}
                    >
                      <DatePicker
                        format="YYYY-MM-DD HH:mm:ss"
                        placeholder="请选择询时间段"
                        showTime={{
                          defaultValue: moment('00:00:00', 'HH:mm:ss'),
                        }}
                      />
                    </Form.Item>
                  </Col>
                  <Col span={8} key="4">
                    <Form.Item
                      label="选择结束日期"
                      name="endLeaveTime"
                      rules={[{ required: true, message: '不能为空！' }]}
                    >
                      <DatePicker
                        format="YYYY-MM-DD HH:mm:ss"
                        placeholder="请选择时间段"
                        showTime={{
                          defaultValue: moment('00:00:00', 'HH:mm:ss'),
                        }}
                      />
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col span={24} key="5">
                <Form.Item label="请假原因" name="leaveType">
                  <Radio.Group onChange={onChange}>
                    <Radio value={0}>病假（需附医院证明）</Radio>
                    <Radio value={1}>事假</Radio>
                    <Radio value={2}>其它</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={24} key="6">
                <Form.Item
                  name="reason"
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: '请假原因不能为空!',
                    },
                    { max: 60, message: '最大长度不能超过60!' },
                  ]}
                  style={{ marginBottom: 24 }}
                >
                  <TextArea rows={4} style={{ marginTop: 10 }} />
                </Form.Item>
              </Col>
              <Col span={24} key="7">
                <Col span={6}>
                  <Upload {...propsdata}>
                    <Button icon={<UploadOutlined />}>上传</Button>
                  </Upload>
                </Col>
              </Col>
              <Col span={22} style={{ marginTop: 40 }}>
                <Button style={{ marginRight: 20 }} htmlType="submit">
                  确认提交
                </Button>
                <Button
                  onClick={() => {
                    history.goBack();
                  }}
                >
                  返回
                </Button>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
    </Spin>
  );
}
